<template>
  <el-descriptions
    class="margin-top"
    :column="2"
    border
    labelClassName="label-width"
  >
    <el-descriptions-item
      v-for="(item, index) in viewList"
      :key="index"
      :label="item.label"
    >
      <template v-if="item.type == 'Select'">
        {{ item.val | selectName(item.dicData, item.props) }}
      </template>
      <template v-else-if="item.type == 'Radio'">
        <Radio v-bind="item" :value="item.val" disabled />
      </template>
      <template v-else-if="item.type == 'Checkbox'">
        <Checkbox v-bind="item" :value="item.val" disabled />
      </template>
      <template v-else-if="item.type == 'Switchs'">
        <Switchs v-bind="item" :value="item.val" disabled />
      </template>
      <template v-else-if="item.type === 'uploadImg'">
        <el-image
          style="width: 50px; height: 50px"
          :src="item.val"
          :preview-src-list="[item.val]"
        >
        </el-image>
      </template>
      <template v-else>{{ item.val }}</template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<style>
.label-width {
  width: 180px;
}
</style>

<script>
import Radio from "./formItem/radio.vue";
import Checkbox from "./formItem/checkbox.vue";
import Switchs from "./formItem/switchs.vue";

export default {
  components: { Radio, Checkbox, Switchs },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  filters: {
    selectName(val, dicData, props) {
      return dicData.filter((item) => item[props.value || "value"] == val)[0][
        props.label || "label"
      ];
    },
  },
  computed: {
    viewList() {
      return this.list;
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>